<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { onLoad } from '@dcloudio/uni-app'
import { getDictType, getTrainingById, getTrainingCourseList } from "../../api/training";

const list = ref([
  {
    id: 1,
    title: '产品设计进阶培训',
    time: '11:00',
    address: '创新中心 301 会议室',
    user: '王梓萱'
  },
  {
    id: 2,
    title: '市场营销策略研讨会',
    time: '14:00',
    address: '创新中心 302 会议室',
    user: '李明'
  },
  {
    id: 3,
    title: '团队协作与沟通技巧培训',
    time: '16:00',
    address: '创新中心 303 会议室',
    user: '张伟'
  }
]);
const trainingCourseList = ref([])
const route = useRoute()
const trainingTypeLi = ref([])
const courseTypeList = ref([])
const from = ref({})
const trainingFormLi = ref([])
const id = ref('')

onLoad((options) => {
  id.value = options.id
  getTrainingFormatLi()
  getTrainingTypeLi()
  getDictTypeList()
})

function getDictTypeList() {
  getDictType('training_format').then(res => {
    courseTypeList.value = res.data.map((it) => {
      return { value: it.dictValue, label: it.dictLabel }
    })
    getDetail()
    getDetailList()
  })
}

async function getDetailList() {
  if (!id.value) return
  const ret = await getTrainingCourseList(id.value as string)
  trainingCourseList.value = ret.data.map(it => {
    const item = courseTypeList.value.find((ele) => ele.value === String(it.trainingFormat))
    it.trainingFormat = item ? item.label : '--'

    return it;
  })

}

async function getDetail() {
  if (!id.value) return
  const ret = await getTrainingById(id.value as string)
  from.value = ret.data || {}
  if (!ret.data) { return }
  const item = trainingTypeLi.value.find((ele) => ele.value === ret.data.trainingType)
  from.value.trainingTypeName = item ? item.label : ''
}

async function getTrainingTypeLi() {
  getDictType("px_type").then((res) => {
    trainingTypeLi.value = res.data.map((it) => {
      return { value: it.dictValue, label: it.dictLabel }
    })
    getDictTypeList()
  })
}

async function getTrainingFormatLi() {
  getDictType('training_format').then((res) => {
    trainingFormLi.value = res.data.map((it) => {
      return { value: it.dictValue, label: it.dictLabel }
    })
  })
}

</script>

<template>
  <view class="T_page">
    <view class="card">
      <view class="title">{{ from.trainingTitle }}</view>
      <view class="items">
        <view>
          <image src="/static/svg/medal.svg" />
          <text>{{ from.trainingScore || '--' }} 学分</text>
        </view>
        <view>
          <image src="/static/svg/medal.svg" />
          <text>{{from.trainingHours ? from.trainingHours + '学时' : '--学时'}}</text>
        </view>
        <view>
          <image src="/static/svg/hourglass.svg" />
          <text>{{ from.trainingTypeName || '--' }}</text>
        </view>
      </view>
      <view class="calendar">
        <image src="/static/svg/calendar.svg" />
        <text>{{ from.startTime }}-{{ from.endTime }}</text>
      </view>
      <progress :percent="from.trainingProgress" show-info border-radius="10rpx" stroke-width="10rpx"
        activeColor="#3B82F6" font-size="24rpx" />
    </view>
    <view class="list">
      <text class="list_title">培训列表</text>
      <view v-if="trainingCourseList.length > 0">
        <view class="list_item_wrap" v-for="item in trainingCourseList" :key="item.id"
          @click="uni.navigateTo({ url: `/pages/courseDetail/index?id=${item.id}` })">
          <view class="list_item_tag"
            :class="item.status === 0 ? 'list_item_tag_un_start' : (item.status === 1 ? 'list_item_tag_success' : 'list_item_tag_ing')">
            {{ item.status === 0 ? '未完成' : (item.status === 1 ? '已完成' : '进行中') }}
          </view>
          <view class="base_view title">{{ item.trainingTheme }}</view>
          <view class="base_view time">
            <image src="/static/svg/time.svg" />
            <text>{{ item.startTime }}~{{ item.endTime }}</text>
          </view>
          <view class="base_view time">
            <image src="/static/svg/training/book.svg" />
            <text>{{ item.moduleTitle || "--" }}</text>
          </view>
          <view class="base_view user">
            <view class="user_item">
              <image src="/static/svg/training/person.svg" />
              <text>{{ item.trainingExpert || "--" }}</text>
            </view>
            <view class="user_item">
              <image src="/static/svg/training/online.svg" />
              <text>{{ item.trainingFormat }}</text>
            </view>
            <view class="user_item">
              <image src="/static/svg/medal.svg" />
              <text>{{ item.classHour || "--" }}</text>
            </view>
          </view>
          <view class="base_view address">
            <uni-icons type="location-filled" :size="uni.$rpxToPx(24)" color="#6B7280" />
            <text>{{ item.trainingAddress || "--" }}</text>
            <uni-icons type="right" :size="uni.$rpxToPx(30)" color="#D1D5DB" />
          </view>
        </view>
      </view>
      <view class="training_no_data" v-else>
        <image src="/static/svg/training/no_data.svg"></image>
        <text>暂无培训安排</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.T_page {
  display: grid;
  grid-template-rows: auto 1fr;
}

.card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;

  image {
    width: 24rpx;
    height: 24rpx;
  }

  >.title {
    font-size: 34rpx;
    color: #000;
  }

  >.items {
    margin-top: 22rpx;
    display: flex;
    align-items: center;
    gap: 26rpx;
    font-size: 24rpx;
    color: #6B7280;

    >view {
      display: flex;
      align-items: center;
      gap: 14rpx;
    }
  }

  >.calendar {
    margin: 14rpx 0 20rpx;
    display: flex;
    align-items: center;
    gap: 14rpx;
    font-size: 24rpx;
    color: #6B7280;
  }
}

.list {
  overflow-y: auto;
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .list_title {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
  }

  .list_item_wrap {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    position: relative;
    margin-bottom: 20rpx;

    .list_item_tag {
      padding: 8rpx 15rpx;
      box-sizing: border-box;
      border-radius: 8rpx;
      font-size: 24rpx;
      position: absolute;
      right: 0;
      top: 0;
    }

    .list_item_tag_ing {
      color: #3B82F6;
      background: #EFF6FF;
    }

    .list_item_tag_success {
      color: #22C55E;
      background: #F0FDF4;
    }

    .list_item_tag_un_start {
      color: #6B7280;
      background: #F9FAFB;
    }

    .base_view {
      display: flex;
      align-items: center;
      gap: 14rpx;
      font-size: 24rpx;
      color: #6B7280;

      &+view {
        margin-top: 14rpx;
      }

      >image {
        width: 24rpx;
        height: 24rpx;
      }
    }

    >.title {
      font-size: 28rpx;
      color: #1f2937;

      &::before {
        flex-shrink: 0;
        content: '';
        width: 14rpx;
        height: 14rpx;
        border-radius: 50%;
        background-color: #3b82f6;
        margin: 0 5rpx;
      }
    }

    >.user {
      .user_item {
        display: flex;
        align-items: center;
        gap: 5px;

        image {
          width: 10px;
          height: 10px;
        }
      }

      >text {
        margin-right: auto;
      }
    }

    .address {
      display: flex;
      align-items: center;

      text {
        flex: 1;
      }
    }
  }

  .training_no_data {
    height: 50vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 14px;
    color: #9CA3AF;

    image {
      width: 112px;
      height: 112px;
    }
  }
}
</style>
